<template>
	<view class="lh-container">
		<customImage imgSrc="/lhhy/yishou/ljj/top.png"></customImage>
		

		<view class="form-container">
			<uni-forms class="forms-item" ref="accountForm" :model="formData">
				<view class="btn-out-father">
					<button class="sub-btn-cus" open-type="getAuthorize" scope="phoneNumber" @getAuthorize="getPhoneNumberConfirm"
						@error="handleAuthError">
						<customImage class="img-btn-cus" imgSrc="/lhhy/yishou/tcq/confirm.png" width="600rpx"></customImage>
					</button>
				</view>
				<view class="agree-box-new">
					<checkbox-group @change="changeAll">
						<checkbox value="cb" :checked="allChecked" color="#3c4aa5" style="transform: scale(0.7)" />
					</checkbox-group>
					<text style="color: #000000">已阅读并同意</text>
					<text style="color: #DBBC63" @click="privatePro('statement')">《个人信息授权及保护声明》</text>
					<text style="color: #DBBC63" @click="privatePro('server')">《会员服务协议》</text>
					<text style="color: #DBBC63" @click="privatePro('lh2561')">《产品说明》</text>
				</view>
			</uni-forms>
		</view>
		<customImage imgSrc="/lhhy/yishou/ljj/bottom.png"></customImage>
		<view class="bottom">
			<view class="">业务资费：首周0.1元，续订29.9元/月(可随时取消)</view>
			<view class="">续订权益：宜搜小说月卡+30元支付宝立减金</view>
			<view class="">客服热线：400-8825-101</view>
		</view>

		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>

		<view class="fixed-1" @click="privatePro('lh2561')">
			<customImage imgSrc="/lhhy/yishou/ljj/rule.png" width="45rpx"></customImage>
		</view>
		<view class="fixed-2" @click="goLink">
			<customImage imgSrc="/lhhy/yishou/ljj/equity.png" width="45rpx"></customImage>
		</view>
		<view class="fixed-3" @click="phone">
			<customImage imgSrc="/lhhy/yishou/ljj/phone.png" width="45rpx"></customImage>
		</view>

		<cusConfirm v-if="isShowAgreementConfirm" @ok="agreementConfirmOkHandler" @cancel="isShowAgreementConfirm = false"
			bgType="zfb">
			<template v-slot:text>
				<text>已阅读并同意</text>
				<text class="tip" @click="showAgreementHandler('statement')">《个人信息授权及保护声明》</text>
				<text class="tip" @click="showAgreementHandler('server')">《会员服务协议》</text>
				<text class="tip" @click="showAgreementHandler('lh2561')">《产品说明》</text>
				<text>等内容</text>
			</template>
		</cusConfirm>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		watchEffect,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onReady
	} from '@dcloudio/uni-app';
	import { storeToRefs } from 'pinia';
	import initApi from '@/apis/init.js';
	import paramApi from '@/apis/paramApi.js';
	import perInfoVue from '../../components/per-info/per-info.vue';
	import { constStore } from '@/store/const.js';
	import { useUserStore } from '@/store/user.js';

	import {
		getALPhoneNumber,
		getWXphoneNumber,
		uuIds,
		getPhoneNumber,
		handleAuthError
	} from '@/utils/login.js';
	import { getProductNum } from '@/utils/commo.js';
	const uuIdsInit = uuIds();
	const { userInfo } = storeToRefs(useUserStore());
	const { constInfo } = constStore();
	const accountForm = ref();
	// 表单数据
	const isShowAgreementConfirm = ref(false);
	const allChecked = ref(false);
	const popupOk = ref();
	const agree = ref('同意');
	const agreeType = ref(1);
	const formData = reactive({
		mobile: '',
		smsCode: null,
		orderNo: null,
		channelCode: '',
		productCode: ''
	});


	const changeAll = val => {
		if (val.detail.value.length > 0) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	};
	const phone = () => {
		uni.makePhoneCall({ phoneNumber: '400-8825101' });
	};
	const goLink = () => {
		uni.navigateTo({ url: '/pages/my/orderList' });
	};
	const agreementConfirmOkHandler = () => {
		allChecked.value = true;
		submitform();
	};
	// 获取手机号 并下单
	const getPhoneNumberConfirm = async () => {
		const res = await getPhoneNumber();
		if (res.code == 20000) {
			submitform();
		}
	};
	/* 发送订单 */
	const submitform = async () => {
		console.log('1');
		if (!paramApi.getP()) {
			uni.setStorageSync('p', 'LH2561');
		}
		if (!paramApi.gets()) {
			uni.setStorageSync('s', '233138');
		}
		console.log(userInfo.value);
		try {
			if (!allChecked.value) return (isShowAgreementConfirm.value = true);
			/* ALIPAY( code:1，name:"支付宝")
			WECHAT( code:2，name:"微信")
			UNION_PAY( code: 3,name:"云闪付"),
			APPLE_STORE( code:4，name:"苹果商店")
			0THER( code:99，name:"其他") */

			/* 
			 H5( code:1, name: "H5"), no usages
			 WX_MINI_PROGRAM( code:2，name:"微信小程序"),3 usages
			 ALIPAY_MINI_PROGRAM( code:3，name:"支付宝小程序")，4usages
			 */

			const arr = {
				productCode: 'LH2561',
				channelCode: paramApi.getA(),
				mobile:'18482027324',// userInfo.value.info.mobile,
				orderType: 3,
				paymentMethod: 1,
				param: paramApi.getParam(),
				uuid: uuIdsInit,
			};

			initApi.associateMemberSign(arr).then(res => {
				console.log(res, 'uuiduuid');
				if (res.code == 20000) {
					// 这个地方 怎么感觉不对 如果是在 andriod 微信浏览器 浏览器 支付宝浏览器 ios 也是一样的
					handleJumpPaySign(res.data);
				} else {
					uni.utils.toast(res.message);
				}
			});


		} catch (e) {
			//TODO handle the exception
			console.log(e);

			return uni.utils.toast('订单订购失败');
		}
	};
	const handleJumpPaySign = query => {
		const arr =
			'https://ulink.alipay.com/?scheme=' +
			encodeURIComponent(query.extInfo?.alipaySignUrl);
		my.ap.openURL({
			url: arr,
			success: res => {
				console.log('openURL success', res,arr);
			},
			fail: err => {
				console.log('openURL success', err,arr,'====');
			}
		});

	};
	onLoad(query => {
		paramApi.initData(query);
		// 支付宝 默认授权登录
		// #ifdef MP-ALIPAY
		getPhoneNumber();
		// #endif
		setTimeout(() => {
			getProductNum(paramApi.getA(), 'LH2561', uuIdsInit);
		}, 100);
	});
	onMounted(() => {});
	/* 统计 */

	const ok1 = () => {
		popupOk.value.close();
		allChecked.value = true;
	};
	const showAgreementHandler = value => {
		console.log(value);
		agreeType.value = value;
		popupOk.value.open('center');
	};
	const privatePro = type => {
		console.log(type);
		agreeType.value = type;
		popupOk.value.open('center');
	};
</script>

<style lang="scss" scoped>
	.tip {
		color: #DBBC63;
	}

	.login-btn {
		animation: scaleUp 2.5s infinite;
		/* 动画名称、持续时间、是否无限循环 */
	}

	@keyframes scaleUp {

		0%,
		50% {
			transform: scale(1);
			/* 开始时的缩放比例 */
		}

		25%,
		75% {
			transform: scale(1.05);
			/* 缩放比例最大值 */
		}

		100% {
			transform: scale(1);
			/* 结束时的缩放比例 */
		}
	}


	.lh-container {
		width: 750rpx;
		margin: 0 auto;
		background-color: #faefd0;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		min-height: 100vh;
	}

	:deep(.uni-checkbox-input) {
		border-radius: 80rpx !important;
	}

	.fixed-phone {
		position: absolute;
		top: 300rpx;
		right: 0rpx;
	}

	.fixed-active {
		position: absolute;
		top: 150rpx;
		right: 0rpx;
	}

	.fixed-link {
		position: absolute;
		top: 450rpx;
		right: 0rpx;
	}

	.arrive-btn {
		position: fixed;
		bottom: 20rpx;
		width: 750rpx;
		text-align: center;
	}

	.sub-btn {
		background: none;
		padding: 0;
		margin: 0;
		border: none;
		animation: scaleUp 2.5s infinite;
		box-shadow: none;
		border-style: none;
		min-height: 160rpx;

		border::after {
			background: none;
			padding: 0;
			margin: 0;
			border: none;
			content: none;
			border-style: none;
		}
	}

	.bottom {
		margin-top: 10rpx;
		text-align: center;
		font-size: 20rpx;
		color: #000000;
	}

	.agree-box-new {
		margin-bottom: 0rpx;
		padding-bottom: 0rpx;
		display: flex;
		align-items: center;
		margin: 0 auto;
		font-size: 20rpx;
		justify-content: center;
		flex-wrap: wrap;
	}
</style>